import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";

var _border$dropdownBorde;

function _templateObject11() {
  var data = _taggedTemplateLiteral(["\n    ", "\n  "]);

  _templateObject11 = function _templateObject11() {
    return data;
  };

  return data;
}

function _templateObject10() {
  var data = _taggedTemplateLiteral(["\n    ", "\n  "]);

  _templateObject10 = function _templateObject10() {
    return data;
  };

  return data;
}

function _templateObject9() {
  var data = _taggedTemplateLiteral(["\n  ", ";\n  body .ant-select-dropdown,\n  body .ant-cascader-menus,\n  body .c7n-cascader-menus {\n    &.ant-select-dropdown-placement-bottomLeft,\n    &.ant-select-dropdown-placement-topLeft {\n      > div {\n        :before,\n        :after {\n          animation-duration: 0s !important;\n        }\n      }\n    }\n  }\n  .c7n-pro-icon-picker-popup,\n  .c7n-select-dropdown {\n    && {\n      &.c7n-pro-select-popup-placement-bottomLeft,\n      &.c7n-select-dropdown-placement-bottomLeft,\n      &.c7n-pro-icon-picker-popup-placement-bottomLeft {\n        > div {\n          :before,\n          :after {\n            animation-duration: 0s !important;\n          }\n        }\n      }\n      &.c7n-select-dropdown-placement-topLeft,\n      &.c7n-pro-icon-picker-popup-placement-topLeft {\n        > div {\n          :before,\n          :after {\n            animation-duration: 0s !important;\n          }\n        }\n      }\n    }\n  }\n  .c7n-pro-select-popup {\n    &.c7n-pro-select-popup-placement-bottomLeft,\n    &.c7n-pro-select-popup-placement-topLeft {\n      :after,\n      :before {\n        animation-duration: 0s !important;\n      }\n    }\n  }\n"]);

  _templateObject9 = function _templateObject9() {
    return data;
  };

  return data;
}

function _templateObject8() {
  var data = _taggedTemplateLiteral(["\n  body .ant-select-dropdown,\n  body .ant-cascader-menus,\n  body .c7n-cascader-menus {\n    &.ant-select-dropdown-placement-bottomLeft,\n    &.ant-cascader-menus-placement-bottomLeft,\n    &.c7n-cascader-menus-placement-bottomLeft {\n      > div {\n        border: 1px solid rgba(0, 0, 0, 0.15);\n        position: relative;\n        margin-top: -6px;\n        ", ";\n      }\n    }\n    &.ant-select-dropdown-placement-topLeft,\n    &.ant-cascader-menus-placement-topLeft,\n    &.c7n-cascader-menus-placement-topLeft {\n      > div {\n        border: 1px solid rgba(0, 0, 0, 0.15);\n        position: relative;\n        margin-bottom: -6px;\n        ", ";\n        z-index: 2;\n      }\n    }\n  }\n  .c7n-pro-icon-picker-popup,\n  .c7n-select-dropdown {\n    && {\n      &.c7n-pro-select-popup-placement-bottomLeft,\n      &.c7n-select-dropdown-placement-bottomLeft,\n      &.c7n-pro-icon-picker-popup-placement-bottomLeft {\n        > div {\n          position: relative;\n          ", ";\n        }\n      }\n      &.c7n-select-dropdown-placement-topLeft,\n      &.c7n-pro-icon-picker-popup-placement-topLeft {\n        > div {\n          position: relative;\n          ", ";\n        }\n      }\n    }\n  }\n  .c7n-pro-icon-picker-popup {\n    &.c7n-pro-icon-picker-popup-placement-bottomLeft {\n      > div {\n        background: #fff;\n        margin-top: -6px;\n      }\n    }\n    &.c7n-pro-icon-picker-popup-placement-topLeft {\n      > div {\n        background: #fff;\n        margin-bottom: -6px;\n      }\n    }\n  }\n  .c7n-pro-select-popup {\n    &.c7n-pro-select-popup-placement-bottomLeft {\n      border: 1px solid rgba(0, 0, 0, 0.15);\n      > div {\n        background: #fff;\n        :first-of-type {\n          margin-top: -6px;\n          width: calc(100% + 2px);\n          margin-left: -1px;\n          border-left: 1px solid #4f7de7;\n          border-right: 1px solid #4f7de7;\n        }\n      }\n      ", "\n    }\n    &.c7n-pro-select-popup-placement-topLeft {\n      border: 1px solid rgba(0, 0, 0, 0.15);\n      .c7n-spin-container {\n        margin-top: 0;\n      }\n      > div {\n        background: #fff;\n        :last-of-type {\n          margin-bottom: -6px;\n          width: calc(100% + 2px);\n          margin-left: -1px;\n          border-left: 1px solid #4f7de7;\n          border-right: 1px solid #4f7de7;\n        }\n      }\n      ", "\n    }\n  }\n"]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n  ", ";\n  :before {\n    right: -1px;\n    bottom: -1px;\n    left: -1px;\n    top: -1px;\n    border-top: 1px solid #4f7de7;\n    border-left: 1px solid #4f7de7;\n    animation: ", " 0.5s linear forwards;\n  }\n  :after {\n    right: -1px;\n    bottom: -1px;\n    left: -1px;\n    top: -1px;\n    border-top: 1px solid #4f7de7;\n    border-right: 1px solid #4f7de7;\n    animation: ", " 0.5s linear forwards;\n  }\n"]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  ", ";\n  :before {\n    left: -1px;\n    right: 50%;\n    top: -1px;\n    bottom: -1px;\n    border-bottom: 1px solid #4f7de7;\n    border-left: 1px solid #4f7de7;\n    animation: ", " 0.5s linear forwards;\n  }\n  :after {\n    right: -1px;\n    left: 50%;\n    top: -1px;\n    bottom: -1px;\n    border-bottom: 1px solid #4f7de7;\n    border-right: 1px solid #4f7de7;\n    animation: ", " 0.5s linear forwards;\n  }\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  :after,\n  :before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    background: none;\n    border-color: #4f7de7;\n    z-index: 1;\n  }\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  0% {right: -1px; bottom: -1px; top: 100%; left: 100%;}\n  50% {right: -1px; bottom: -1px; top: -1px; left: 100%;}\n  100% {right: -1px; bottom: -1px; top: -1px; left: 50%;}\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  0% {left: -1px; bottom: -1px; top: 100%; right: 100%;}\n  50% {left: -1px; bottom: -1px; top: -1px; right: 100%;}\n  100% {left: -1px; bottom: -1px; top: -1px; right: 50%;}\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  0% {left: 100%; top: -1px; right: -1px; bottom: 100%;}\n  50% {left: 100%; top: -1px; right: -1px; bottom: -1px;}\n  100% {left: 50%; top: -1px; right: -1px; bottom: -1px;}\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  0% {left: -1px; top: -1px; right: 100%; bottom: 100%;}\n  50% {left: -1px; top: -1px; right: 100%; bottom: -1px;}\n  100% {left: -1px; top: -1px; right: 50%; bottom: -1px;}\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

import { css, keyframes } from "styled-components";
import inputAnimation from "./inputAnimation";
import { getRequiredData } from "../../utils/utils";
var topToBottomLeftKeyframes = keyframes(_templateObject());
var topToBottomRightKeyframes = keyframes(_templateObject2());
var bottomToTopLeftKeyframes = keyframes(_templateObject3());
var bottomToTopRightKeyframes = keyframes(_templateObject4());
var dropdownBaseCss = css(_templateObject5());
var borderAnimMixinBottom = css(_templateObject6(), dropdownBaseCss, topToBottomLeftKeyframes, topToBottomRightKeyframes);
var borderAnimMixinTop = css(_templateObject7(), dropdownBaseCss, bottomToTopLeftKeyframes, bottomToTopRightKeyframes);
var selectAnimation = css(_templateObject8(), borderAnimMixinBottom, borderAnimMixinTop, borderAnimMixinBottom, borderAnimMixinTop, borderAnimMixinBottom, borderAnimMixinTop);
var dropdownNoMotion = css(_templateObject9(), selectAnimation);

function getAnimationDropdown(props, CSS) {
  var _getRequiredData = getRequiredData(props, "input"),
      _getRequiredData$bord = _getRequiredData.border,
      border = _getRequiredData$bord === void 0 ? "" : _getRequiredData$bord;

  return border === "all" || border.length === 4 ? CSS : "";
}

export default (_border$dropdownBorde = {
  border: inputAnimation.border,
  dropdownBorder: css(_templateObject10(), function (props) {
    return getAnimationDropdown(props, selectAnimation);
  }),
  dropdownBorderNoMotion: css(_templateObject11(), function (props) {
    return getAnimationDropdown(props, dropdownNoMotion);
  }),
  bottom: inputAnimation.bottom
}, _defineProperty(_border$dropdownBorde, null, ""), _defineProperty(_border$dropdownBorde, undefined, ""), _border$dropdownBorde);